<template>
	<div class="functionBox">
		<div  >
			<div class="functionTitle">
				<div>{{ pData.title }}</div>
				<div class="managementBtn" @click="clickguanli">返回<i class="el-icon-arrow-right managementBtnIcon"></i></div>
			</div>
			<div class="functionList">
				<ul>
					<li v-show="unfoldData && unfoldData.length > 0" v-for="item in unfoldData" :key="item.id">
						<i class="el-icon-remove liIcon" @click="deleteMenu(item)"></i>
						<el-image class="listImage" :src="item.menuIcon?item.menuIcon:$globalData.defaultImg" fit="cover"></el-image>
						<div class="listTitle">{{item.menuName}}</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="hr"></div>
		<div  >
			<div class="functionTitle">
				<div>{{ pData.title }}</div>
			</div>
			<div class="functionList">
				<ul>
					<li v-show="foldData && foldData.length > 0" v-for="item in foldData" :key="item.id">
						<i class="el-icon-circle-plus liIcon" :class="item.isHide?'liIconH':''" @click="addMenu(item)"></i>
						<el-image class="listImage" :src="item.menuIcon?item.menuIcon:$globalData.defaultImg" fit="cover"></el-image>
						<div class="listTitle">{{item.menuName}}</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'editorfonction',
		data() {
			return {
				pageData: '',
				unfoldData: '', // 需要已有数据
				foldData: '', // 需要操作数据
				userId: '',
				companyId: '',
				pData: ''
			}
		},
		mounted() {
			let store = this.$store.state.user
			this.userId = store.userInfo.id
			this.companyId = this.$store.state.company.companyId
			this.pData = JSON.parse(sessionStorage.getItem('pageMenu'))
			this.getPageData()
		},
		methods: {
			getPageData() {
				this.$request.get('/api/addressBook/WebMenu/getEditMenuList', {
					userId: this.userId,
					companyId: this.companyId,
					pid: this.pData.id
				}).then(res => {
					if (res.code == 200) {
						this.pageData = res.data
						console.log(this.pageData)
						this.unfoldData = this.pageData.noHideMenu // 需要展开的数据
						this.foldData = this.pageData.allMenu // 需要折叠的数据
					}
				})
			},
			clickguanli() {
				//        
				this.$parent.$data.fonctionCut = true
			},
			deleteMenu(item){
				// /api/addressBook/WebMenu/hideMenu
				this.$request.get('/api/addressBook/WebMenu/hideMenu', {
					userId: this.userId,
					companyId: this.companyId,
					menuId: item.id
				}).then(res => {
					if (res.code == 200) {
						this.$message.success('设置成功')
						this.getPageData()
					}
				})
			},
			addMenu(item){
				this.$request.get('/api/addressBook/WebMenu/noHideMenu', {
					userId: this.userId,
					companyId: this.companyId,
					menuId: item.id
				}).then(res => {
					if (res.code == 200) {
						this.$message.success('设置成功')
						this.getPageData()
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.functionTitle {
		color: #333333;
		font-size: 16px;
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.managementBtn {
		color: #23B14D;
		font-size: 16px;
		cursor: pointer;
	}

	.managementBtnIcon {
		margin-right: 5px;
	}

	.functionList {
		width: 100%;

	}

	.functionList ul {
		display: flex;
		justify-content: start;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.functionList li {
		width: 180px;
		height: 60px;
		padding: 10px;
		margin-left: 40px;
		display: flex;
		justify-content: start;
		flex-wrap: nowrap;
		align-items: center;
		border-radius: 8px;
		border: 1px solid #DCDCDC;
		cursor: pointer;
		margin-bottom: 30px;
		position: relative;
	}

	.liIcon {
		position: absolute;
		color: #EF2929;
		z-index: 5;
		right: -10px;
		top: -10px;
		font-size: 20px;
		cursor: pointer;
		background: #FFFFFF;
		border-radius: 100%;
	}

	.functionList li:hover {
		border-color: #23B14D;
	}

	.functionList li:nth-child(4n+1) {
		margin-left: 0;
	}

	.listImage {
		width: 40px;
		height: 40px;
		margin-right: 10px;
		/* display: inline-block; */
	}

	.listTitle {
		font-size: 16px;
		color: #222222;
		/* display: inline-block; */
	}

	.collapseTitle {
		margin-bottom: 0;
		position: relative;
		width: 100%;
	}

	.managementBtnBoxRight {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.functionBox>>>.el-collapse-item__content {
		padding-bottom: 0;
	}

	.functionBox>>>.el-collapse-item__arrow {
		margin: 0 auto 0 -90%;
		position: relative;
	}

	.noData {
		padding: 20px 0;
		text-align: center;
		color: #AAAAAA;
	}

	.hr {
		height: 1px;
		width: 100%;
		background: #DCDCDC;
		margin: 40px 0;
	}

	.liIconH {
		color: #DCDCDC;
	}
</style>
